<template>
    <div class="rebate-list">
        <div class="main">
            <div class="order-wrap">
                <RebateCard
                    v-for="(rebateId, index) in rebateList"
                    :key="index"
                    :nickname="rebateMap[rebateId].nickname"
                    :title="rebateMap[rebateId].title"
                    :avatar="rebateMap[rebateId].avatar"
                    :shop="rebateMap[rebateId].shop"
                    :created-at="rebateMap[rebateId].created_at"
                    :price="rebateMap[rebateId].price"
                    :referrer="rebateMap[rebateId].referrer"
                    :rebate="rebateMap[rebateId].rebate"
                    :identity="rebateMap[rebateId].identity" />
            </div>
        </div>

        <ListFooter :loaded="rebateWrap.loaded" :req="rebateWrap.req" />
    </div>
</template>

<script lang="ts">
import RebateCard from '@/features/manage/rebateCard.vue';
import { EMPTY_LIST } from '@/lib/constant';
import {
    getRebateKey,
} from '@/lib/utils';
import store from '@/store';
import { Component, Vue } from 'vue-property-decorator';

@Component({
    name: 'RebateList',
    components: {
        RebateCard,
    },
})
export default class RebateList extends Vue {
    public selectedPeople: any = null;

    public get referrerId() {
        return this.$route.query.referrer_id;
    }
    public get referrerLevel() {
        return this.$route.query.referrer_level;
    }
    public get shopId() {
        return ((this.$route.query.shop_id || '') as string).split(',');
    }
    public get start() {
        return this.$route.query.start;
    }
    public get end() {
        return this.$route.query.end;
    }
    public get rebateListMap() {
        return store.state.manage.rebateListMap;
    }
    public get rebateMap() {
        return store.state.manage.rebateMap;
    }
    /** 用户基础信息 */
    public get userBasicInfo() {
        return store.state.user.basicInfo;
    }
    public get rebateKey() {
        return getRebateKey({
            referrerId: this.referrerId,
            referrerLevel: this.referrerLevel,
            shopId: this.shopId,
            start: this.start,
            end: this.end,
        });
    }
    public get rebateWrap() {
        return this.rebateListMap[this.rebateKey] || EMPTY_LIST;
    }
    public get rebateList(): number[] {
        return this.rebateWrap.list;
    }

    public async getRebateList(forceUpdate = false) {
        const params = {
            offset: this.rebateList.length,
            count: 10,
            referrerId: this.referrerId,
            referrerLevel: this.referrerLevel,
            shopId: typeof this.shopId === 'string' ? [ this.shopId ] : this.shopId,
            start: this.start,
            end: this.end,
        };
        if (forceUpdate) {
            Object.assign(params, {
                offset: 0,
                forceUpdate,
            });
        }
        await store.dispatch('manage/getRebateList', params);
    }
    public async onReachBottom() {
        await this.getRebateList();
    }

    public async created() {
        this.getRebateList();

        window.addEventListener('reachbottom', this.onReachBottom);
    }
    public beforeDestroy() {
        window.removeEventListener('reachbottom', this.onReachBottom);
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.rebate-list {
    min-height: 100%;
    background-color: #f8f8f8;

    .main {
        background-color: #f8f8f8;
        .search-box {
            .title {
                padding-top: 12px;
            }
        }
        .order-wrap {
            padding: 0 12rpx;
        }
    }
     .outer-picker {
        position: relative;
        padding: 12px;
        .people-picker-box {
            box-sizing: border-box;
            width: 100%;
            padding: 10rpx 10px;
            border: 2rpx solid #BBBBBB;
            border-radius: 40rpx;
            .picker {
                position: relative;
                box-sizing: border-box;
                width: 100%;
                padding: 0 60rpx;
                &::before {
                    position: absolute;
                    left: 10px;
                    top: 50%;
                    transform: translateY(-50%);
                    font-family: 'iconfont';
                    content: "\e610";
                    font-size: 32rpx;
                    color: @grey-color;
                    pointer-events: none;
                }
            }
        }
        .options-box {
            box-sizing: border-box;
            position: absolute;
            z-index: 2;
            top: 96rpx;
            left: 24rpx;
            width:  375 * 2 - 48rpx;
            background-color: @white-color;
            border: 2rpx solid #BBBBBB;
            border-radius: 10rpx;
            .inner {
                width: 100%;
                max-height: 500rpx;
                overflow-y: scroll;
                .item {
                    position: relative;
                    box-sizing: border-box;
                    width: 100%;
                    height: 60rpx;
                    line-height: 60rpx;
                    text-align: center;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}

</style>
